<template>
	<view>
		<view class="betting flex_c" :style="`background: url(${$util.prefix('game/betting_bg.png')}) 0 0 no-repeat;`">
			<view class="title flex_center">
				<text>茶会倒计时</text>
				<u-count-down ref="countDown" :millisecond="false" :time="(time * 1000) + 1000" format="ss"></u-count-down>
				<text>s</text>
			</view>
			
			<view class="content flex_center">
				<view class="goods-image">
					<image :src="$util.prefix(`game/gift_image${index}.png`)" mode="aspectFill"></image>
				</view>
				
				<u-icon name="arrow-right-double" color="#D6A166" size="24rpx"></u-icon>
				
				<view class="image">
					<!-- type 第几个食物：1=树叶，2=玉米，3=香蕉，4=肉块，5=胡萝卜，6=竹子，7=苹果，8=火腿 -->
					<image :src="$util.prefix(`game/elephant2.png`)" mode="widthFix" v-if="index == 1"></image>
					<image :src="$util.prefix(`game/raccoon2.png`)" mode="widthFix" v-if="index == 2"></image>
					<image :src="$util.prefix(`game/monkey2.png`)" mode="widthFix" v-if="index == 3"></image>
					<image :src="$util.prefix(`game/lion2.png`)" mode="widthFix" v-if="index == 4"></image>
					<image :src="$util.prefix(`game/rabbit2.png`)" mode="widthFix" v-if="index == 5"></image>
					<image :src="$util.prefix(`game/panda2.png`)" mode="widthFix" v-if="index == 6"></image>
					<image :src="$util.prefix(`game/fox2.png`)" mode="widthFix" v-if="index == 7"></image>
					<image :src="$util.prefix(`game/tiger2.png`)" mode="widthFix" v-if="index == 8"></image>
				</view>
				
				<view class="input flex_center">
					<view class="cate flex_center">
						<view class="icon flex_r_around" @click="add(-1)">
							<text>-</text>
						</view>
						<view class="text flex_r_around">
							<text>{{ num }}</text>
						</view>
						<view class="icon flex_r_around" @click="add(1)">
							<text>+</text>
						</view>
					</view>
					
					<view class="btn flex_r_around" @click="num = 10">
						<text>10</text>
					</view>
					
					<view class="btn flex_r_around" @click="num = 100">
						<text>100</text>
					</view>
				</view>
				
			</view>
			
			<view class="btn-box flex_r_between">
				<view class="item flex_r_around" :style="`background: url(${$util.prefix('game/betting_btn_bg.png')}) 0 0 no-repeat;`">
					<text>拥有</text>
					<image :src="$util.prefix('game/buy_grass_icon.png')" mode="aspectFill"></image>
					<text>{{ have_leaf_num }}</text>
				</view>
				<view class="item flex_r_around" :style="`background: url(${$util.prefix('game/betting_btn_bg.png')}) 0 0 no-repeat;`" @click="onBuy">
					<view>立即购买</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				num: 1,

			}
		},
		props: {
			index: {
				type: Number,
				default: 0
			},
			rid: {
				type: String,
				default: '0',
			},
			task_id: {
				type: Number,
				default: 0
			},
			to_uid: {
				type: String,
				default: '0'
			},
			time: {
				type: Number,
				default: 30
			},
			have_leaf_num: {
				type: Number,
				default: 0
			}
		},
		created() {
			
		},
		methods: {
			
			// 点10 和 100直接变  2025.5.24 运营说的 （胖的）
			add(num){
				this.num += num;
				if(this.num < 1){
					this.num = 1;
				}
				
				if(this.num > 100){
					this.num = 100;
				}
			},
			
			onBuy(){
				if(this.task_id == 0){
					return this.$util.msg('动物进场中');
				}
				this.$post('/active.animalPrize/setPrize',{
					num: this.num,
					task_id: this.task_id,
					rid: this.rid,
					type: this.index,
					to_uid: this.to_uid
				}).then(res=>{
					this.$emit('onBetting')
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.betting {
		height: 480rpx;
		width: 100vw;
		background-size: 100% !important;
		padding-top: 16rpx;
		.title {
			/deep/ text {
				font-size: 32rpx;
				color: #FFEABB;
				line-height: 38rpx;
				font-family: 'gongfu';
			}
		}
		
		.content {
			margin: 56rpx 0 36rpx;
			width: 588rpx;
			height: 144rpx;
			background: #FEE5A6;
			border-radius: 24rpx;
			
			.goods-image {
				width: 56rpx;
				height: 56rpx;
				image {
					width: 56rpx;
					height: 56rpx;
				}
			}
			
			.image {
				width: 88rpx;
				height: 80rpx;
				overflow: hidden;
				image {
					width: 88rpx;
				}
			}
		}
	
		.input {
			margin: 24rpx 0 20rpx;
			.cate {
				width: 168rpx;
				height: 44rpx;
				background: #F2D7AC;
				border-radius: 22rpx;
				
				.text {
					flex: 1;
					text {
						font-weight: 600;
						font-size: 28rpx;
						color: #AA6F2F;
					}
				}
				
				.icon {
					width: 44rpx;
					height: 44rpx;
					border-radius: 22rpx;
					background: #E5B881;
					border: 4rpx solid #AB7235;
					text {
						font-size: 36rpx;
						line-height: 36rpx;
						font-weight: 600;
						color: #AB7235;
					}
				}
			}
			
			.btn {
				width: 88rpx;
				height: 64rpx;
				background: #FBC072;
				box-shadow: inset 0rpx -6rpx 10rpx 4rpx #FFE8B8;
				border-radius: 24rpx;
				border: 2rpx solid #C59968;
				margin-left: 12rpx;
				
				text {
					font-weight: 600;
					font-size: 28rpx;
					color: #AA6F2F;
				}
			}
		}
	
		.btn-box {
			width: 588rpx;
			.item {
				width: 196rpx;
				height: 80rpx;
				background-size: 100% !important;
				padding: 0 12rpx;
				
				text {
					font-size: 24rpx;
					color: #FFEABB;
					line-height: 34rpx;
				}
				
				image {
					width: 44rpx;
					height: 44rpx;
				}
				
				view {
					font-size: 28rpx;
					color: #FFEABB;
					line-height: 36rpx;
					font-family: 'gongfu';
				}
			}
		}
	
	}
	
	
</style>
